<template>
    <div class="page device-detail-view">
        <div id="map"></div>
        <tabbar></tabbar>
    </div>
</template>

<script>
    import tabbar from '../tabbar.vue';
    import util from '@/libs/util';
    import BMap from 'BMap';
    import BMapLib from 'BMapLib';
    import myPointImg from '@/images/mypoint.png';

    export default {
        components: {
            tabbar
        },

        data() {
            return {
                loading: false,
                data: {},
            }
        },

        created() {
            let that = this;
            this.$nextTick(function () {
                that.initMap();
            })
        },

        methods: {
            initMap () {
                let that = this;
                var map = new BMap.Map("map");
                var point = new BMap.Point(116.331398,39.897445);
                map.centerAndZoom(point,12);

                /**
                 * 添加地图定位空间
                 */
                let geoCtrl = new BMap.GeolocationControl({
                    enableAutoLocation: true,
                });

                geoCtrl.addEventListener('locationSuccess', (e) => {
                    console.log('定位成功', e.point);
                    that.addPoint(map, e.point)
                });

                geoCtrl.addEventListener('locationError', statusCode => {
                    console.log('定位失败', statusCode)
                });

                geoCtrl.location();

                map.addControl(geoCtrl);
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.NavigationControl({
                    anchor: BMAP_ANCHOR_BOTTOM_LEFT,
                    offset: BMap.Size(40, 200)
                }));
                map.setMapStyle({style:'light'});
                map.enableScrollWheelZoom();
            },

            addPoint (map, currentPoint) {
                let that = this;
                that.$root.loading('正在获取附近充电设备');

                map.clearOverlays();

                /**
                 * 设置当前位置
                 * @type {BMap.Marker}
                 */
                let location = new BMap.Point(currentPoint.lng, currentPoint.lat);
                var myIcon = new BMap.Icon(myPointImg, new BMap.Size(30,30));

                var marker = new BMap.Marker(location, {icon: myIcon});  // 创建标注
                map.addOverlay(marker);
                marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                map.centerAndZoom(location, 15);

                let params = {lat: currentPoint.lat, lng: currentPoint.lng, page: 1, range: 50000, pageSize: 10000};
                util.api().get('/api/devices', {
                    params
                }).then(resp => {
                    if (resp.data.data.length > 0) {
                        let markers = new Array();
                        let devices = resp.data.data;
                        for (let i in devices) {
                            let pt = new BMap.Point(devices[i].coordinate.lng, devices[i].coordinate.lat);
                            let marker = new BMap.Marker(pt);

                            var opts = {
                                width : 200,     // 信息窗口宽度
                                height: 100,     // 信息窗口高度
                                title : devices[i].name + `【${devices[i].status_text}】` , // 信息窗口标题
                            };

                            let infoWindow = new BMap.InfoWindow(`地址：${devices[i].full_address}`, opts);  // 创建信息窗口对象
                            marker.addEventListener("click", function(){
                                map.openInfoWindow(infoWindow, pt); //开启信息窗口
                            });
                            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                            markers.push(marker);
                        }

                        //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
                        var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markers, maxZoom: 13});
                    } else {
                        that.$root.toast('当前位置附近暂无充电设备');
                    }
                    that.$root.closeLoading();
                }).catch(e => {
                    that.$root.toast('当前位置附近暂无充电设备');
                    that.$root.closeLoading();
                });
            }
        }
    }
</script>